<script lang="ts" setup>
import { useUserStore } from '~/composables/store/user-store';

const userStore = useUserStore();

const hoverState = ref(false);
</script>

<template>
	<div
		class="relative"
		@mouseenter="hoverState=true"
		@mouseleave="hoverState=false"
	>
		<!--  实际头像展示  -->
		<Avatar
			:class="[hoverState?'scale-[2] top-8 -left-[10px]':'scale-100 top-0 left-0', 'absolute z-10 transition-all duration-300']"
		>
			<AvatarImage
				:src="userStore.user?.userInfo?.avatar||''"
				alt="Avatar"
			/>
		</Avatar>
		<!-- 占位 -->
		<Avatar class="invisible">
			Avatar
		</Avatar>
		<!--  用户信息卡片  -->
		<div
			:class="[hoverState?'opacity-100 scale-100':'opacity-0 scale-0',
				'bg-card w-60 rounded-lg shadow-lg pt-8 p-4 absolute -translate-x-[80%] top-[120%] transition-all']"
		>
			<div class="text-2xl line-clamp-1">
				{{ userStore.user?.userInfo?.nickName }}
			</div>
			<div class="text-base line-clamp-1">
				{{ userStore.user?.userInfo?.username }}
			</div>
			<Button
				class="mt-2 w-full"
				@click="userStore.logout"
			>
				退出登录
			</Button>
		</div>
	</div>
</template>

<style scoped>
.active {
  transform: scale(1.5);
}
</style>
